<template>
  <!-- membershipOrder 会费订单详情 -->
  <PageContainer>
    <view class="container">
      <Header title="订单详情" :isBoxShadow="false" />

      <HeadInfo>
        <template #default>
          <view class="pt-10 fz-12">
            <view class="color1" v-if="orderInfo.orderState === OrderStateEnum.NOPAYMENT">
              <text>待支付</text>
              <text class="pl-8 color3" v-if="endTime">{{ endTime }}</text>
            </view>
            <view class="color2" v-if="orderInfo.orderState === OrderStateEnum.DONE">已完成</view>
            <view class="color3" v-if="orderInfo.orderState === OrderStateEnum.CLOSED">已取消</view>
            <view class="color1" v-if="orderInfo.orderState === OrderStateEnum.UNDERWAY">
              进行中
            </view>
          </view>
        </template>
      </HeadInfo>
      <BodyInfo :info="orderInfo.suborder" :orderState="orderInfo.orderState" />

      <view class="bgf mt-15">
        <OfficialAccount />
      </view>

      <PayButton
        v-if="
          orderInfo.orderState === OrderStateEnum.NOPAYMENT ||
          orderInfo.orderState === OrderStateEnum.CLOSED
        "
        :orderInfo="orderInfo"
        @openPay="openPay"
        @closeOrder="closeOrder"
        @resetPay="resetPay"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  membershipOrder  会费订单详情 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import HeadInfo from './components/headInfo.vue';
  import BodyInfo from './components/bodyInfo.vue';
  import PayButton from './components/payButton.vue';
  import OfficialAccount from '@/components/OfficialAccount/index.vue';

  import { ref, unref } from 'vue';
  import { onLoad, navigateTo } from '@/router';
  import { getMembershipOrder, cancellOrder } from '@/api/order';
  import { type MembershipOrderDetailsResult } from '@/api/order/types';
  import { OrderStateEnum } from '@/enums/orderEnum';
  import { countDown } from '@/utils/dateUtil';
  import { requestPayment } from '../utils/payment';
  import { onUnload } from '@dcloudio/uni-app';

  const orderCode = ref('');
  onLoad<'MembershipOrder'>((op) => {
    orderCode.value = op.orderCode;
    getOrderDetail();
  });

  // 获取订单详情
  const orderInfo = ref({} as MembershipOrderDetailsResult);
  const endTime = ref('');
  const getOrderDetail = async function () {
    orderInfo.value = await getMembershipOrder(unref(orderCode));
    timesDown();
  };

  // 待支付倒计时
  const timerRef = ref();
  const timesDown = function () {
    if (
      unref(orderInfo).orderState === OrderStateEnum.NOPAYMENT &&
      unref(orderInfo).paymentEndTime
    ) {
      const timer = function () {
        let timeObj = countDown(unref(orderInfo).paymentEndTime);
        endTime.value = `剩余${timeObj.h}时${timeObj.m}分后关闭`;

        timerRef.value = setInterval(() => {
          timeObj = countDown(unref(orderInfo).paymentEndTime);
          if (timeObj.totalSecond <= 0) {
            endTime.value = '';
            getOrderDetail();
            clearInterval(unref(timerRef));
          } else {
            endTime.value = `剩余${timeObj.h}时${timeObj.m}分后关闭`;
          }
        }, 10000);
      };
      timer();
    }
  };

  // 立即支付
  const openPay = function () {
    requestPayment(unref(orderInfo).payCode).then(() => {
      getOrderDetail();
    });
  };

  // 取消订单
  const closeOrder = function () {
    cancellOrder(unref(orderInfo).id).then((res) => {
      getOrderDetail();
    });
  };

  // 重新缴费
  const resetPay = function () {
    const { suborder } = unref(orderInfo);
    navigateTo({
      name: 'awaitPay',
      options: { type: suborder.type, id: suborder.memberId as number },
    });
  };

  onUnload(() => clearInterval(unref(timerRef)));
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-warning: #daa03e;
  $color-error: #ff3434;

  .color1 {
    color: $color-primary;
  }

  .color2 {
    color: $color-warning;
  }

  .color3 {
    color: $color-error;
  }

  .title {
    color: #808080;
  }
</style>
